{# 图书展示 #}
{% macro bookitem(book,index) %}
    <div id="book-item" class="col-sm-6 col-md-3">
        <a href="" data-toggle="modal" data-target="#book-introduction{{ index }}" class="thumbnail">
            <img src="{{ book.image.url }}">
            <div class="caption">
                <p>{{ book.name }}</p>
                <p class="author">
                    <span class="text-muted">{{ book.author }}</span> 著
                    {% if book.translator %}
                        ，<span class="text-muted">{{ book.translator }}</span> 译
                    {% endif %}
                </p>
                <p><span class="price">{{ book.discount_price }}</span> <s>{{ book.original_price }}</s></p>
            </div>
        </a>
    </div>
    <div id="book-introduction{{ index }}" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <ol style="padding:0;margin:0;background-color:white;" class="modal-title breadcrumb">
                        <li>{{ book.category.up }}</li>
                        <li><a href="{{ url('book:category',args=(book.category.id,1)) }}">{{ book.category }}</a></li>
                    </ol>
                </div>
                <div style="height:400px;" class="modal-body">
                    <img style="float:left;" src="{{ book.image.url }}">
                    <h3 style="margin:0;">{{ book.name }}</h3>
                    <hr>
                    <div>
                        <p>售 价：<span style="color:red;"><span
                                style="font-size:1.2em;">￥{{ book.discount_price }}</span>({{ book.discount }}折)</span>
                        </p>
                        <p>定 价：￥{{ book.original_price }}</p>
                    </div>
                    <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                        作 者：{{ book.author }}</p>
                    {% if book.translator %}
                        <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">译
                            者：{{ book.translator }}</p>
                    {% endif %}
                    <hr>
                    <p>版 次：{{ book.revision }}</p>
                    <p>页 数：{{ book.page_numbers }}</p>
                    <p>出 版 社：{{ book.press }}</p>
                    <p>出版日期：{{ book.published_date }}</p>
                    <hr>
                    <p>存 货 量：{{ book.stock }}</p>
                    <p>销 售 量：{{ book.sales }}</p>
                </div>
                <div class="modal-footer">
                    <button style="float:left;" class="btn btn-warning" data-dismiss="modal">关闭</button>
                    <a style="float:left;" href="{{ url('book:detail',args=(book.id,1)) }}" class="btn btn-info">
                        <span class="glyphicon glyphicon-book"></span> 详细</a>
                    <button class="btn btn-info"><span class="glyphicon glyphicon-star"></span> 收藏</button>
                    <a href="{{ url('cart:add',args=(book.id,)) }}" class="btn btn-primary"><span
                            class="glyphicon glyphicon-shopping-cart"></span> 加入购物车
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{# 分页 #}
{% macro pagination_widget(pagination,endpoint,id,fragment='') %}
    <ul style="text-align:center;" class="pagination">
        {# 上一页 #}
        <li {% if not pagination.has_previous() %} class="disabled" {% endif %}>
            <a href="{% if pagination.has_previous() %}{{ url(endpoint,args=(id,pagination.number - 1,)) }}{{ fragment }}{% else %}#{% endif %}">
                &laquo;</a>
        </li>

        {# 页数 #}
        {% for p in pagination.paginator.page_range %}
            {% if p %}
                {% if p==pagination.number %}
                    <li class="active">
                        <a href="{{ url(endpoint,args=(id,p,)) }}{{ fragment }}">{{ p }}</a>
                    </li>
                {% else %}
                    <li>
                        <a href="{{ url(endpoint,args=(id,p,)) }}{{ fragment }}">{{ p }}</a>
                    </li>
                {% endif %}
            {% else %}
                <li class="disabled"><a href="#">&hellip;</a></li>
            {% endif %}
        {% endfor %}

        {# 下一页 #}
        <li {% if not pagination.has_next() %} class="disabled" {% endif %}>
            <a href="{% if pagination.has_next() %}{{ url(endpoint,args=(id,pagination.number + 1,)) }}{{ fragment }}{% else %}#{% endif %}">
                &raquo;
            </a>
        </li>
    </ul>
{% endmacro %}

{# 订单列表 #}
{% macro order_list(orders) %}
    <table style="margin:0;" class="table">
        <thead>
        <tr>
            <th>收货人</th>
            <th>图书</th>
            <th>支付方式</th>
            <th>支付金额</th>
            <th>下单时间</th>
            <th>完成时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for order in orders %}
            <tr>
                <td>
                    <p>{{ order.recipient }}</p>
                </td>
                <td>
                    {% for item in order.get_items() %}
                        <a style="display:block;" href="{{ url('book:detail',args=(item.book.id,1,)) }}">
                            {{ loop.index }}. {{ item }}
                        </a>
                    {% endfor %}
                </td>
                <td>
                    <p>{{ order.payment_method.get_name_display() }}</p>
                </td>
                <td>
                    <p style="color:red;">{{ order.payment_amount }}</p>
                </td>
                <td>
                    <p>{{ order.created_time }}</p>
                </td>
                <td>
                    <p>{{ order.finished_time | default('-',True) }}</p>
                </td>
                <td>
                    <p style="color:red;">{{ order.get_state_display() }}</p>
                </td>
                <td>
                    <div class="btn-group-vertical">
                        {% if order.state=='P' %}
                            <button class="btn btn-sm btn-danger">取消订单</button>
                            <button class="btn btn-sm btn-info">延迟收货</button>
                            <a href="{{ url('user:confirm',args=(order.id,)) }}" class="btn btn-sm btn-warning">确认收货</a>
                        {% else %}
                            <a href="" class="btn btn-sm btn-danger">删除</a>
                            <button class="btn btn-sm btn-info">评价</button>
                            <button class="btn btn-sm btn-warning">再次购买</button>
                        {% endif %}

                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endmacro %}